<template>
  <!-- @click="dialogVisible = true" -->
  <div class="top">
    <el-button plain style="height: 35px" type="primary" @click="dialogVisible = true"><el-icon size="16">
        <Plus />
      </el-icon>新增</el-button>
    <input type="text" v-model="taskStore.search_Val.name" class="input-search" placeholder="关键字" />
    <select aria-placeholder="全部状态" v-model="taskStore.search_Val.status" class="select-search">
      <option value="">-全部状态-</option>
      <option value="0">待执行</option>
      <option value="1">已完成</option>
      <option value="4">结束</option>
      <option value="2">执行中</option>
      <option value="3">已作废</option>
    </select>
    <el-dropdown @click="taskStore.search_task" style="margin-left: 5px;" size="large" split-button trigger="click">
      搜索
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <upSearch />
          </el-dropdown-item>
          <el-dropdown-item>
            <column_show />
          </el-dropdown-item>
          <el-dropdown-item>
            <span>打印</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 添加 -->
    <r-dialog v-model="dialogVisible" ref="Dialog" width="70%" :draggable="true">
      <template #header> [新增]项目 </template>
      <template #default>
        <h1 style="text-align: center; font-size: 1.5em; color: black">项目</h1>
        <table style="width: 90%; margin: 0 auto">
          <tr>
            <td>项目类型</td>
            <td>
              <select v-model="form.type">
                <option value="">请选择</option>
                <option value="一般项目">一般项目</option>
                <option value="重要项目">重要项目</option>
                <option value="关键项目">关键项目</option>
              </select>
            </td>
            <td>编号</td>
            <td>
              <input type="text" v-model="form.card" />
            </td>
          </tr>
          <tr>
            <td>名称</td>
            <td colspan="3">
              <input type="text" v-model="form.name" />
            </td>
          </tr>
          <tr>
            <td>开始时间</td>
            <td>
              <!-- <input type="datetime-local" :value="nowTime"/> -->
              <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </td>
            <td>预计结束时间</td>
            <td>
              <el-date-picker v-model="form.end_time" type="datetime" placeholder=""></el-date-picker>
            </td>
          </tr>
          <tr>
            <td>负责人</td>
            <td style="display: flex">
              <el-input v-model="form.user" style="width: 70%" readonly>
              </el-input>
              <div style="
                  width: 35%;
                  background-color: rgb(66, 161, 220);
                  display: flex;
                  flex-wrap: nowrap;
                  line-height: 3em;
                  color: #fff;
                  padding: 0 10px;
                  gap: 20px;
                ">
                <span>x</span>
                <button style="font-size: 1em; text-wrap: nowrap" @click="adddShow=true">
                  选择
                </button>
              </div>
            </td>
            <td>执行人</td>
            <td></td>
          </tr>
          <tr>
            <td>内容</td>
            <td colspan="3">
              <div style="border: 1px solid #ccc">
                <Toolbar style="display: flex;;border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                  mode="default" />
                <Editor style="height: 300px; overflow-y: hidden;" v-model="form.context" :defaultConfig="editorConfig"
                  mode="default" @onCreated="handleCreated" />
              </div>
            </td>
          </tr>
          <tr>
            <td>相关文件</td>
            <td colspan="3"><input type="file" /></td>
          </tr>
          <tr>
            <td>进度</td>
            <td>
              <select v-model="form.progress">
                <option v-for="i in 100" :key="i" :value="i">{{ i }}%</option>
              </select>
            </td>
            <td>状态</td>
            <td>
              <select v-model="form.status">
                <option value="0">待执行</option>
                <option value="1">已完成</option>
                <option value="2">执行中</option>
              </select>
            </td>
          </tr>
        </table>
        <!-- 嵌套选择框 -->
        <r-dialog ref="Dialog2" width="25%" v-show="adddShow" :draggable="true" :modal="false">
          <template #header> 请选择... </template>
          <template #default>
            <div style="width: 100%; height: 300px">
              <input style="border: 0; outline: none; width: 90%; padding: 0 5px"
                placeholder="部门/姓名/职业" /><span>查找</span>
              <hr />
              <p style="
                  height: 30px;
                  display: flex;
                  justify-content: left;
                  align-items: center;
                  padding: 0 10px;
                ">
                <el-icon>
                  <House />
                </el-icon>
                <span style="margin-left: 5px">开发团队</span>
              </p>
              <div style="
                  height: 30px;
                  display: flex;
                  justify-content: left;
                  align-items: center;
                  padding: 0 50px;
                " v-for="(item, index) in team" :key="index">
                <p>{{ item.name }}</p>
                <hr />
              </div>
            </div>
          </template>
        </r-dialog>
      </template>
      <template #footer>
        <button @click="addTask">保存(s)</button>
      </template>
    </r-dialog>
    <div v-show="flag" class="nav-buttons" @click="search_btn($event)">
      <button class="nav-btn" :style="{
        backgroundColor:
          current == '/tasks/project_management/executing_projects' || current == '/home/tasks/project_management/executing_projects'
            ? 'rgb(214,214,214)'
            : '',
      }" value="/tasks/project_management/executing_projects">
        我执行项目
      </button>
      <button class="nav-btn" :style="{
        backgroundColor:
          current == '/tasks/project_management/unfinished_projects'
            ? 'rgb(214,214,214)'
            : '',
      }" value="/tasks/project_management/unfinished_projects">
        我未完成项目
      </button>
      <button class="nav-btn" :style="{
        backgroundColor:
          current == '/tasks/project_management/responsible_projects'
            ? 'rgb(214,214,214)'
            : '',
      }" value="/tasks/project_management/responsible_projects">
        我负责项目
      </button>
      <button class="nav-btn" :style="{
        backgroundColor:
          current == '/tasks/project_management/created_projects'
            ? 'rgb(214,214,214)'
            : '',
      }" value="/tasks/project_management/created_projects">
        我创建项目
      </button>
    </div>
    <div v-show="!flag" class="nav-buttons" @click="search_btn($event)">
      <button class="nav-btn" :style="{
        backgroundColor:
          current == '/tasks/project_management/all_projects'
            ? 'rgb(214,214,214)'
            : '',
      }" value="/tasks/project_management/all_projects">
        所有项目
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
const dialogVisible = ref(false);
import { ElMessage } from "element-plus";
import { Plus, ArrowDown, House } from "@element-plus/icons-vue";
import { onMounted, reactive, ref, Ref ,onBeforeUnmount,shallowRef} from "vue";
import RDialog, { Rdialog } from "../../r-dialog.vue";
import { btnValue } from "../../../store/task/top.ts";
import dayjs from "dayjs";
import { get, post } from "../../../request.ts";
import { useIndexStore } from '@/store/index.ts'
import { useTaskStore } from '../store/index.ts'
import upSearch from "./up-search.vue";
import column_show from "./column_show.vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const editorRef = shallowRef()

    // 内容 HTML

    // 模拟 ajax 异步获取内容
    const toolbarConfig = {}
    const editorConfig = { placeholder: '请输入内容...' }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
const taskStore = useTaskStore()
const topStore = btnValue()
const visible = ref(false)
const onSearch = () => {
  taskStore.search_task()
}
const form = reactive({
  name: "",
  card: "", //编号
  type: "", //项目类型
  start_time: 0, //开始时间
  end_time: 0, //结束时间
  user: "", //负责人
  executor: "", //执行人
  context: "", //内容
  file: "", //相关文件
  progress: 0, //进度
  status: "", //状态
});
const indexStore = useIndexStore()
const flag = topStore.flag
const adddShow=ref(false)
const Dialog: Ref<Rdialog> = ref<Rdialog>();
const Dialog2: Ref<Rdialog> = ref<Rdialog>();
const search_btn = (e: any) => {
  const menu = indexStore.menu_arr.filter(item => item.path === e.target.value)[0]
  if (menu) {
    indexStore.tabs_toggle(menu)
  } else {
    const menulist = [
      {
        "title": "我执行的项目",
        "icon": "/executing_projects.svg",
        "path": "/tasks/project_management/executing_projects"
      },
      {
        "title": "我未完成项目",
        "icon": "/unfinished_projects.svg",
        "path": "/tasks/project_management/unfinished_projects"
      },
      {
        "title": "我负责的项目",
        "icon": "/responsible_projects.svg",
        "path": "/tasks/project_management/responsible_projects"
      },
      {
        "title": "我创建的项目",
        "icon": "/created_projects.svg",
        "path": "/tasks/project_management/created_projects"
      },
      {
        "title": "所有项目一览",
        "icon": "/all_projects.svg",
        "path": "/tasks/project_management/all_projects"
      }
    ]
    let obj = menulist.filter(i => i.path == e.target.value)[0]
    indexStore.menu_Array(obj)
  }
}



// 开发团队
const team = reactive([
  {
    name: "管理层",
    id: 1,
    children: [{ name: "张三" }, { name: "张四" }, { name: "张五" }],
  },
  {
    name: "开发部",
    id: 2,
    children: [{ name: "李四" }, { name: "李五" }, { name: "李六" }],
  },
  {
    name: "财务部",
    id: 3,
    children: [{ name: "王五" }, { name: "王六" }, { name: "王七" }],
  },
]);
// 添加
const addTask = async () => {
  let { code }: { code: Number } = await post("/tasks/add_task", form);
  if (code == 200) {
    ElMessage.success("添加成功");
  }
};
let current = topStore.current

</script>

<style scoped>
header {
  background-color: rgb(48, 78, 211);
}

/* 可选：为表格添加边框等样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

/* 可选：为单元格添加边框 */
td {
  border: 1px solid #ccc;
  padding: 5px;
}

/* th,td{
  padding: 8px;
  text-align: left;
  border: 1px solid #777272;
} */
.top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

/* rgb(204, 204, 204)灰色 */
.input-search {
  padding: 0 5px;
  font-size: 14px;
  margin-left: 10px;
  width: 160px;
  padding: 2px 5px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
  transition: all 0.3s ease;
  height: 35px;
}

.input-search:focus {
  border-color: rgb(102, 175, 233);
  /* 边框颜色变为蓝色 */
  box-shadow: 0 0 5px rgb(102, 175, 233);
  /* 添加蓝色投影 */
  outline: none;
  /* 移除默认轮廓 */
}

.select-search {
  width: 150px;
  font-size: 14px;
  height: 35px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
  transition: all 0.3s ease;
  padding: 0 5px;
  margin-left: 10px;
}

.select-search:focus {
  border-color: rgb(102, 175, 233);
  box-shadow: 0 0 5px rgb(102, 175, 233);
  outline: none;
}

.container {
  font-size: 14px;
  margin-left: 10px;
  width: 80px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid rgb(204, 204, 204);
  display: flex;
}

.left-button {
  width: 50px;
  border-right: 1px solid rgb(204, 204, 204);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.right-button {
  cursor: pointer;
}

.nav-buttons {
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
  display: flex;
  margin-left: 10px;
}

.nav-buttons button {
  height: 35px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-right: 1px solid rgb(204, 204, 204);
  padding: 0 5px;
}

.nav-buttons button:last-child {
  margin-right: 0;
  border-right: 0;
}

.nav-btn:focus {
  background-color: rgb(214, 214, 214);
}

tr td:nth-child(3),
tr td:first-child {
  width: 15%;
  text-align: right;
}

td select,
input {
  width: 95%;
  border: 1px solid rgb(214, 214, 214);
}

td input:hover,
td input:focus {
  /* 清除默认样式 */
  outline: none;
  border: 1px solid rgb(102, 175, 233);
}

td select:hover,
td select:focus {
  /* 清除默认样式 */
  outline: none;
  border: 1px solid rgb(102, 175, 233);
}
</style>
